<template>
  <div>
    <div>
      <el-dialog
      title="遥调-测点配置"
      :visible.sync="dialogVisible"
      width="40%"
      :showClose="false"
      >
      <div>
        <template>
          <el-table
              :data="tableData"
              :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
              border
              style="width: 100%">
              <el-table-column
                      label="测点标识"
                      prop="itemTag"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="itemName"
                      label="测点名称"
                      align="center">
                      <template #default="{row}">
                        <el-input size="mini" v-model="row.itemName"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="测点地址"
                      prop="dataAddress"
                      align="center">
                     <template #default="{row}">
                        <el-input size="mini" v-model="row.dataAddress"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="holdAlarm"
                      label="使能开关"
                      align="center">
                     <template #default="{row}">
                        <el-select v-model="row.holdAlarm"  clearable   size="mini" style="margin-right: 10px;" >
                          <el-option class="select" label="是" :value="true"></el-option>
                          <el-option class="select" label="否" :value="false"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="数据枚举"
                      prop="controlMode"
                      align="left"
                      width="150">
                        <template #default="{row}">
                            <span v-if="!Object.keys(row.dataEnum)[0]" @click="putmeiju(row)"><i class="el-icon-plus" style=" cursor: pointer;"></i></span>
                            <div v-if="!Object.keys(row.dataEnum).length==0">
                                <span>{{Object.keys(row.dataEnum)[0]+':' }}</span>
                                <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[0] }}</span>
                                <span><i class="el-icon-edit" style="color: skyblue;margin: 0 5px; cursor: pointer;"></i></span>
                                <span  @click="delmeiju(row,Object.keys(row.dataEnum)[0])"><i class="el-icon-delete" style="color: red;cursor: pointer; " ></i></span>
                              <span  v-if="!Object.keys(row.dataEnum)[1]" style="margin-left: 5px; cursor: pointer;" @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                            </div>
                            <div v-if="Object.keys(row.dataEnum)[1]" >
                              <span>{{Object.keys(row.dataEnum)[1]?Object.keys(row.dataEnum)[1]+':':'' }}</span>
                              <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[1]?Object.values(row.dataEnum)[1]:'' }}</span>
                              <span ><i class="el-icon-edit" style="color: skyblue;margin: 0 5px; cursor: pointer;"></i></span>
                              <span  @click="delmeiju(row,Object.keys(row.dataEnum)[1])"><i class="el-icon-delete" style="color: red;cursor: pointer; " ></i></span>
                              <span v-if="!Object.keys(row.dataEnum)[2]" style="margin-left: 5px; cursor: pointer; " @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                            </div>
                            <div v-if="Object.keys(row.dataEnum)[2]" >
                                <span>{{Object.keys(row.dataEnum)[2]?Object.keys(row.dataEnum)[2]+':':'' }}</span>
                                <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[2]?Object.values(row.dataEnum)[1]:'' }}</span>
                                <span ><i class="el-icon-edit" style="color: skyblue;margin: 0 5px; cursor: pointer;"></i></span>
                                <span  @click="delmeiju(row,Object.keys(row.dataEnum)[2])"><i class="el-icon-delete" style="color: red; cursor: pointer;" ></i></span>
                                <span v-if="!Object.keys(row.dataEnum)[3]" style="margin-left: 5px;cursor: pointer; " @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                            </div>
                          </template>
                    </el-table-column>
            </el-table>
        </template>
      </div>
      <span  class="dialog">
          <button class="button" type="primary" @click="submit" style=" cursor: pointer;">确 定</button>
          <button @click="dialogVisible = false" style=" cursor: pointer;">取 消</button>
        </span>
    </el-dialog>
    </div>
    <div>
        <el-dialog
          :visible.sync="dialogVisibles"
          width="30%"
          >
          <div>
            <el-form :rules="rule" :model="meiju">
              <el-form-item label="枚举值:" prop="enumValue" size="80" >
              <el-input v-model="meiju.enumValue" style="width: 250px;margin-top: 5px;margin-left: 15px;" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="枚举名称:" prop="enumName">
              <el-input v-model="meiju.enumName" style="width: 250px;margin-top: 5px;" size="mini"></el-input>
            </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <button class="button" type="primary" @click="xinmeiju" style=" cursor: pointer;">确 定</button>
            <button class="button neww" @click="dialogVisibles = false" style=" cursor: pointer;">取 消</button>
          </span>
        </el-dialog>
      </div>
  </div>
</template>

<script>
import { getpicedianlistapi, putmeijuapi, delmeijuapi, postpiliangputapi, postpixiucedianapi } from '@/api/ElectricalDistribution/IotTechnology/measure'
import { putpiliangapi } from '@/api/ElectricalDistribution/IotTechnology/device'
export default {
  name: 'MaintenanceYaotiao',
  props: {
    changeselect: {
      type: Array
    },
    flag: {
      type: String
    }
  },
  data () {
    return {
      dialogVisible: false,
      dialogVisibles: false,
      tableData: [],
      meiju: {},
      rule: {
        enumValue: [
          { required: true, message: '枚举值必填', trigger: 'blur' }
        ],
        enumName: [
          { required: true, message: '枚举名称必填', trigger: 'blur' }
        ]
      }
    }
  },

  mounted () {

  },

  methods: {
    async getgetpicedianlist () {
      const arr = this.changeselect.map(ele => ele.id)
      if (this.flag) {
        const res = await postpixiucedianapi(arr)
        this.tableData = res.data.list
      } else {
        const res = await getpicedianlistapi(arr)
        this.tableData = res.data.list
      }
    },
    async submit () {
      if (this.flag) {
        await putpiliangapi(this.tableData)
      } else {
        await postpiliangputapi(this.tableData)
      }
      this.dialogVisible = false
      this.$message.success('修改成功')
      this.$emit('shuxing')
    },
    async putmeiju (row) {
      this.row = row
      this.dialogVisibles = true
    },
    async xinmeiju () {
      await putmeijuapi({ ...this.meiju, id: this.row.id })
      this.dialogVisibles = false
      this.getgetpicedianlist()
      this.$message.success('添加成功')
      this.meiju = {}
    },
    delmeiju (row, val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delmeijuapi({ enumValue: val, id: row.id })
        this.getgetpicedianlist()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        this.getgetpicedianlist()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog{
  display: inline-block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.dialog button{
  width:70px;
  height:30px;
  background-color:#fff;
  border-radius:5px;
  border:1px solid #ccc;
  margin-left:5px;
}
.button{
  background-color: #169bd5 !important;
  color: #fff;
}
.neww{
  margin: 0 90px 0 10px;
  background-color: #fff !important;
  color: black !important;
  border: 1px solid #ccc !important;
}
.button{
  width: 63px;
  height: 32px;
  border-radius: 3px;
  color: #fff;
  border: 1px solid #ccc;
  background-color: #1890ff;
}
</style>
